<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/layui/css/layui.css">
  <style>
    .lsc-top{
      margin-top: 10px;
    }
    .layui-table #list .sex{
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 4px;
      text-align: center;
      line-height: 30px;
      background-color: #f0f9eb;
      color: orange;
    }
  </style>
</head>
<body>
  <!-- 顶部盒子 -->
    <div class="layui-form-item layui-row lsc-top">
      <div class="layui-col-md3">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input id="lsc-username" type="username" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-col-md3">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
          <input id="lsc-pho" type="phone" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-col-md3">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select id="lsc-sex" name="city" lay-ignore lay-verify="required" style="display: block;width:100%;height: 36px;">
            <option value="">请选择</option>
            <option value="0">男</option>
            <option value="1">女</option>
          </select>
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-input-block">
          <button class="layui-btn"  lay-filter="formDemo" id="search">搜索</button>
          <button class="layui-btn layui-btn-primary" id="lsc-reset">重置</button>
        </div>
      </div>
    </div>   
  


  <!-- 暂定下方表格 -->
    <!-- 表格区域 -->
    <table class="layui-table">
          <colgroup>
            <col width="">
            <col width="180">
            <col width="180">
            <col width="180">
            <col width="140">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>#</th>
              <th>用户ID</th>
              <th>用户名</th>
              <th>手机号</th>
              <th>用户头像</th>
              <th>性别</th>
              <th>出生年月</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="list" class="lsc-list">
            <!-- <tr>
              <td>#</td>
              <td>用户ID</td>
              <td>用户名</td>
              <td>手机号</td>
              <td><img src="" alt=""></td>
              <td><span class="sex">女</span></td>
              <td>2021/3/4 17:20:29</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete">删除</button>
              </td>
            </tr> -->
          </tbody>
    </table>

    <!-- 分页区域 -->
    <div id="page-box"></div>

  <!-- 编辑框 -->
    <!-- 备用： 编辑弹出层的表单内容结构 -->
    


  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="./js/jquery.min.js"></script>
  <script src="./lib/layui/layui.all.js"></script>
  <script src="./lsc-tip/axios.js"></script>
  <script src="./js/axiosBase.js"></script>
  <script src="./js/lsc-use.js"></script>


  <!-- 点击编辑弹出编辑框 -->
  <script type="text/html" id="dialog-edit">
    <form class="layui-form" id="form-edit" lay-filter="form-edit">
  <!-- 隐藏域，保存 Id 的值 -->
      <input type="hidden" name="id">
        <div class="diviputt">
          <div class="layui-form-item" style="float: left;">
            <label class="layui-form-label" style="margin-top: 25px;">*用户名</label>
            <div class="layui-input-block">
              <input type="text" name="username" required lay-verify="required"
                placeholder="请输入用户名称" autocomplete="off" class="layui-input" style="width: 250px;height: 36px;margin-top: 25px;">
            </div>
          </div>
          <div class="layui-form-item" style="float: right;">
            <label class="layui-form-label" style="margin-top: -54px;">*手机号</label>
            <div class="layui-input-block">
              <input type="text" name="mobile" required lay-verify="required"
              placeholder="请输入手机号名称" autocomplete="off" class="layui-input" style="width: 250px;height: 36px;margin-top: -54px; margin-right: 30px;">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="text" name="password" 
              placeholder="留空表示不修改" autocomplete="off" class="layui-input" style="width: 250px;height: 36px;">
          </div>
        </div>
        <div class="layui-form-item" pane="">
          <label class="layui-form-label">*性别</label>
          <input type="text" name="sex1" value="0" style="display: none;">
          <div class="layui-input-block">
            男
            <input id="switchTest" type="checkbox" name="sex" value="0" lay-skin="switch" lay-filter="switchTest" title="开关">
            女
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label" style="margin-top: 15px;">用户头像</label>
          <div class="layui-input-block">
            <input type="file" id="file" style="display: none;" accept="image/jpeg,image/png,image/gif,image/bmp"/> 
            <div class="lsc-box layui-input-block" name="icon" style="width: 300px;height: 92px;display: none;">
              <img src="" class="layui-input" id="lsc-img" alt="" style="width: 50%;height: 100%;">
            </div>
            <button class="layui-btn layui-btn-normal"  style="margin-top: 18px;" id="changMsg">点击上传
            </button>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block" style="margin-left: 630px;margin-top: 40px;">
          <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo" id="lsc-close">取消</button>
          <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo"> 确定</button>
          </div>
        </div>
    </form>
  </script>
</body>
</html>